<template>
    <div class="info-box">
        <div class="info-title">
            <h3>消息通知</h3>
            <el-button v-if="tabPosition == 'mgt'" type="primary" @click="releaseFn(1)">发布消息</el-button>
        </div>
        <div class="info-content" v-if="roleId == 1">
            <el-table
                :data="tableData"
                ref="multipleTable"
                border
                style="width: 100%">
                <el-table-column label="序号" width="100px">
                    <template slot-scope="scope"><span>{{scope.$index+(currentPage - 1) * pagesize + 1}}</span> </template>
                </el-table-column>
                <el-table-column prop="userName" label="发布人">
                </el-table-column>
                <el-table-column prop="startTimeStr" label="通知时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="noticeContentDialog(scope.row.noticeContent)">查看内容</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount"
                style="margin-top: 20px; text-align: center;">
            </el-pagination>
        </div>
        <div class="info-content" v-if="roleId == 2 || roleId == 3 || roleId == 4">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;"  @change="changeHandler">
                <el-radio-button label="list">消息列表</el-radio-button>
                <el-radio-button label="mgt">消息管理</el-radio-button>
            </el-radio-group>
            <div v-if="tabPosition == 'list'">
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column label="序号" width="100px">
                        <template slot-scope="scope">{{scope.$index+(currentPage - 1) * pagesize + 1}} </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="发布人">
                    </el-table-column>
                    <el-table-column prop="startTimeStr" label="通知时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="noticeContentDialog(scope.row.noticeContent)">查看内容</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pagesize"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
            <div v-if="tabPosition == 'mgt'">
                <el-table
                    :data="tableData2"
                    border
                    style="width: 100%">
                    <el-table-column label="序号" width="100px">
                        <template slot-scope="scope"><span>{{scope.$index+(currentPage2 - 1) * pagesize2 + 1}}</span> </template>
                    </el-table-column>
                    <el-table-column prop="startTimeStr" label="通知时间">
                    </el-table-column>
                    <el-table-column prop="endTimeStr" label="结束时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="noticeContentDialog(scope.row.noticeContent)">查看内容</el-button>
                            <el-button type="text" size="small" @click="releaseFn(2,scope.row.id, scope.row.startTimeStr, scope.row.endTimeStr, scope.row.noticeContent, scope.row.classIdList)">修改</el-button>
                            <el-button type="text" size="small" @click="deleteFn(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage2"
                    :page-size="pagesize2"
                    layout="total, prev, pager, next, jumper"
                    :total="totalCount2"
                    style="margin-top: 20px; text-align: center;">
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="noticeTitle" :visible.sync="dialogFormVisible" width="500px" @close="closeDialog">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" style="width:100%; margin:0 auto;">
                <el-form-item label="选择班级 :" prop="classValue" v-if="roleId == 2">
                    <el-select
                        v-model="form.classValue"
                        multiple
                        placeholder="请选择">
                        <el-option
                        v-for="item in form.classOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="通知时间 :" prop="startTime" v-if="roleId == 2 || roleId == 3 || roleId == 4">
                    <el-date-picker
                        v-model="form.startTime"
                        type="date"
                        placeholder="选择通知时间"
                        :picker-options="pickerBeginDateBefore"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd"
                        @change="changeTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间 :" prop="endTime">
                    <el-date-picker
                        type="date"
                        placeholder="选择结束时间"
                        v-model="form.endTime"
                        :picker-options="pickerBeginDateAfter"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="消息内容 :" prop="content">
                    <el-input v-model="form.content" type="textarea" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="submitForm('form')">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="消息内容"
            :visible.sync="dialogVisible"
            width="30%">
            <span style="word-wrap: break-word;">{{content}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                //登录用户ID
                userId: '',
                roleId: '',
                tableData: [],
                currentPage:1,
                pagesize:10,
                totalCount: 1000,
                tabPosition: 'list',

                tableData2: [],
                currentPage2:1,
                pagesize2:10,
                totalCount2: 1000,
                dialogFormVisible: false,
                noticeTitle: '',
                type: '',
                form: {
                    classOptions: [],
                    classValue: [],
                    startTime: '',
                    endTime: '',
                    content: ''
                },
                //弹窗表单验证
				rules: {
                    classValue: [
                        { required: true, message: '请选择班级', trigger: 'change' }
                    ],
                    startTime: [
                        { type: 'string', required: true, message: '请选择通知时间', trigger: 'change' }
                    ],
                    endTime: [
                        { type: 'string', required: true, message: '请选择结束时间', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '请填写消息内容', trigger: 'blur' }
                    ]
                },
                modifyRowId: '',
                pickerBeginDateBefore: {
                    disabledDate: (time) => {
                        return (time.getTime() + 3600 * 1000 * 24) < Date.now();
                    }
                },
                pickerBeginDateAfter: {
                    disabledDate: (time) => {
                        let beginDateVal = this.form.startTime;
                        console.log(11)
                        if (beginDateVal) {
                            return this.form.startTime
                        }
                    }
                },
                websock: null,
                content: '',
                dialogVisible: false
            }
        },
        created () {
            this.roleId = JSON.parse(window.localStorage.getItem('access-user')).roleId
            this.userId = JSON.parse(window.localStorage.getItem('access-user')).id
            this.init()   //初始化
        },
        methods: {
            init() {
                let self = this
                self.$http.get('/dataplatform/system/mana/tsa/getNoticeList?pageNum='+self.currentPage +'&pageSize='+self.pagesize).then((response) => {
                    let res = response.data
                    if(res.code == '200'){
                        self.tableData = res.data.list
                        self.totalCount = res.data.total
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表格分页
			handleSizeChange: function (size) {
				this.pagesize = size
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage
				this.init()
            },
            //关闭弹窗
            closeDialog(){
                this.$refs.form.resetFields()
            },
            //发布消息
            releaseFn(type,id,startTime,endTime,content,classIdList) {
                let self = this
                self.form.classOptions = []
                self.form.classValue = []
                if(self.roleId == 2){
                    self.$http.get('/dataplatform/common/search/listClassItem').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            for (let i = 0; i < res.data.classList.length; i++) {
                                let classJson = {}
                                classJson.label = res.data.classList[i].name
                                classJson.value = res.data.classList[i].id
                                self.form.classOptions.push(classJson)
                            }
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }
                if(type == 1){
                    self.noticeTitle = '发布消息'
                    self.type = 1
                    self.form.classValue = []
                    self.form.startTime = ''
                    self.form.endTime = ''
                    self.form.content = ''
                }else{
                    self.noticeTitle = '修改消息'
                    self.type = 2
                    self.modifyRowId = id
                    self.form.startTime = startTime == '' ? '' : startTime
                    self.form.endTime = endTime
                    self.form.content = content
                    self.form.classValue = classIdList == null ? null : classIdList
                }
                self.dialogFormVisible = true
            },
            //表格分页
			handleSizeChange2: function (size) {
				this.pagesize2 = size
			},
			handleCurrentChange2: function(currentPage) {
				this.currentPage2 = currentPage
				this.changeHandler()
            },
            //tab切换
            changeHandler() {
                if(this.tabPosition == 'mgt'){
                    this.$http.get('/dataplatform/system/mana/ta/getNoticeManaList?pageNum='+this.currentPage2 +'&pageSize='+this.pagesize2).then((response) => {
                        let res = response.data
                        if(res.code == '200'){
                            this.tableData2 = res.data.list
                            this.totalCount2 = res.data.total
                        }else if(res.code == '401'){
                            this.$router.replace({
                                path:'/login'
                            })
                        }else{
                            this.$message.error(res.message)
                        }
                    })
                }else if(this.tabPosition == 'list'){
                    this.init()
                }
            },
            //发布消息表单提交
            submitForm(formName) {
                let self = this
				self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let path, data = {}
                        if(self.type == 1){
                            path = '/dataplatform/system/mana/ta/addNotice'
                            data = {
                                startTime: self.form.startTime == '' ? '' : self.form.startTime,
                                endTime: self.form.endTime,
                                noticeContent: self.form.content,
                                classList: self.form.classValue == '' ? null : self.form.classValue
                            }
                        }else{
                            path = '/dataplatform/system/mana/ta/saveNotice'
                             data = {
                                id: self.modifyRowId,
                                startTime: self.form.startTime == '' ? '' : self.form.startTime,
                                endTime: self.form.endTime,
                                noticeContent: self.form.content,
                                classList: self.form.classValue == '' ? null : self.form.classValue
                            }
                        }
                        self.$http.post(path,data).then((response) => {
                            let res = response.data
                            if(res.code == '200'){
                                if(self.type == 1){
                                    self.$message({
                                        message: '发布成功',
                                        type: 'success'
                                    })
                                }else{
                                    self.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                }

                                self.changeHandler()
                                self.dialogFormVisible = false
                                self.$refs[formName].resetFields()
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //删除行
            deleteFn(id) {
                let self = this
                self.$confirm('确认删除吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    //确认
                    self.$http.get('/dataplatform/system/mana/ta/delMessage?idList='+id+'').then((response) => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            self.changeHandler()
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {});
            },
            //消息内容弹窗
            noticeContentDialog(content) {
                this.content = content
                this.dialogVisible = true
                // this.$alert(''+content+'', '消息内容', {
                //     confirmButtonText: '确定',
                //     callback: action => {
                //     }
                // });
            },
            //开始时间不能大于结束时间
            changeTime(date){
                this.form.endTime = ''
                this.pickerBeginDateAfter = {
                    disabledDate(time) {  //开始时间-结束时间
                        return (time.getTime() < new Date(date).getTime());
                    }
                }
            },
            // changeStartTime2(date){
            //     if(new Date(date).getTime() > new Date(this.form2.endTime).getTime()){
            //         this.form2.endTime = ''
            //     }
            //     this.pickerBeginDateAfter2 = {
            //         disabledDate(time) {  //开始时间-结束时间
            //             return (time.getTime() < new Date(date).getTime());
            //         }
            //     }
            // },
            // changeEndTime2(date){
            //     if(new Date(date).getTime() < new Date(this.form2.startTime).getTime()){
            //         this.form2.startTime = ''
            //     }
            //     this.pickerBeginDateBefore2 = {
            //         disabledDate(time) {  //开始时间-结束时间
            //             return (time.getTime() > new Date(date).getTime());
            //         }
            //     }
            // }
        }
    }
</script>
